import { useEffect } from 'react'
import styles from './scss/MusicBasicSetting.module.scss'
import audioPlayer from '@/lib/music/audioPlayer'
import { musicBasicSettingStore } from '@/store/musicBasicSettingStore'
import { observer } from 'mobx-react'
import ProgressBar from '@/components/ProgressBar'
import CheckBox from '@/components/ChechBox'
const MusicBasicSetting = observer(() => {
  useEffect(() => {
    if (musicBasicSettingStore.value.volume)
      audioPlayer.volume = musicBasicSettingStore.value.volume
  }, [musicBasicSettingStore.value.volume])
  return (
    <div>
      <div className={styles['field-box']}>
        <div className={styles['left']}>声音：</div>
        <div className={styles['right']}>
          <ProgressBar
            progress={musicBasicSettingStore.value.volume}
            onChange={(value) =>
              musicBasicSettingStore.setValue('volume', value)
            }
          />
        </div>
      </div>
      <div className={styles['field-box']}>
        <div className={styles['left']}>音号显示：</div>
        <CheckBox
          onChange={(checked) =>
            musicBasicSettingStore.setValue('showNote', checked)
          }
          checked={musicBasicSettingStore.value.showNote}
        />
      </div>
      <div className={styles['field-box']}>
        <div className={styles['left']}>键位显示：</div>
        <CheckBox
          onChange={(checked) =>
            musicBasicSettingStore.setValue('showKeyCode', checked)
          }
          checked={musicBasicSettingStore.value.showKeyCode}
        />
      </div>
    </div>
  )
})
export default MusicBasicSetting
